<%--
  Created by IntelliJ IDEA.
  User: 申忠帅
  Date: 2021/4/14
  Time: 16:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <link href="../../static/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../static/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <style>

    </style>
</head>
<body>
<form action="comodity?opr=added" method="post">
    <table id="tab" align="center" class="table table-hover table-bordered">
        <tr>
            <td colspan="5">
                <!--text-center  文本居中 -->
                <h1 class="text-center">添加商品分类信息</h1>
            </td>
        </tr>
        <tr>
            <td>分类名称</td>
            <td>
                <input type="text" class="form-control" id="name" name="name">
            </td>
        </tr>

        <tr>
            <td>分类级别</td>
            <td>
                <input type="text" class="form-control" id="type" name="type">
            </td>
        </tr>
        <tr>
            <td>父类分类</td>
            <td>
                <input type="text" class="form-control" id="parentId" name="parentId">
            </td>
        </tr>

        <tr>
            <td colspan="3">
                <p class="text-center">
                    <button type="submit" class="btn btn-primary">提交</button>
                    <button type="reset" class="btn btn-primary">重置</button>
                </p>
            </td>
        </tr>
    </table>
</form>
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script>
    $("#categoryLevel1Id").change(function(){
        // alert($("#categoryLevel1Id").val())
        $.ajax({
            url: 'product?opr=two',
            type: 'post',
            async: false,
            data: {
                id:$("#categoryLevel1Id").val()
            },
            dataType: 'json',
            success: function (data) {
                // console.log(data)
                $("#two").empty();/* empty()方法是将标签option中的值置成空 */
                $("#two").append("<option>请选择..</option>");
                for (let i = 0;i<data.length;i++){
                    /* append()可以同时传入多个节点或字符串，没有返回值 */
                    $("#two").append("<option value="+data[i].id+">"+data[i].name+"</option>");
                }
            }
        })
    })
</script>
</body>
</html>
